<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practise</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="first">
    <div style="display: -webkit-box">
        <div style="-webkit-box-flex: 1;"></div>
        <div class="backgroundImage" style="background: url(images/background1.png) no-repeat;width:1500px;height: 800px">
            <div style="width: 20%;height: 20%"></div>
            <div style="font-size: 40px">Hello World</div>
            <div style="display: -webkit-box">
                <div style="-webkit-box-flex: 1"></div>
                <div style="width: 570px;height:30%;font-size: 13px;display: inline-block;margin-top: 10%">China is speeding up strategic plan. standards,traffic rules, laws and regulation
                    on accident-incurred liabilities for its smart car industry. Economic information
                    Daily reported Thursday.</div>
                <div style="-webkit-box-flex: 1"></div>
            </div>
            <div style="display: -webkit-box;">
                <div style="-webkit-box-flex: 1"></div>
                <div style="border: 1px solid;margin-top: 30px;width: 70%">
                    <div style="margin-top: 5%;">CREATE YOUR ACCOUNT</div>
                    <div style="color: darkgray;font-size: 8px;margin-bottom: 3%">IT IS ABSOLUTELY FREE</div>
                    <div style="display: -webkit-box">
                        <div style="-webkit-box-flex: 1"></div>
                        <div style="-webkit-box-flex: 3">
                            <input type="text" value="denis@getcraftwork.com">
                            <input type="text" placeholder="Create your password" style="margin-left: 3%">
                            <button>SIGN UP</button>
                        </div>
                        <div style="-webkit-box-flex: 1"></div>
                    </div>
                    <div style="height: 50%;display: inline-block;"></div>
                </div>
                <div style="-webkit-box-flex: 1"></div>
            </div>
        </div>
        <div style="-webkit-box-flex: 1"></div>
</div>
</div>

<div class="second">
    <div style="text-align: center;font-size: 8px;font-weight: 400;margin-top: 7%;font-weight: lighter">BOALTLOADS OF AWESOME</div>
    <div style="width: 32%;display: inline-block"></div>
    <div style="text-align: center;font-size: 30px;display: inline-block;width: 35%">Ready-made,ustomizable,HTML
    landing page sections</div>
    <div style="display: -webkit-box;width: 100%;margin-top: 5%">
        <div style="-webkit-box-flex: 1;"></div>
            <div style="width: 500px;">
                <div style="display: inline-block">
                    <div style="width: 10%;float: left;"><img src="images/Iphone%20Icon.png"></div>
                    <div style="width: 85%;float: left">
                        <div style="font-weight: 400;margin-bottom: 3%;">Mobbile First</div>
                        <div>All modulz are buil mobile-first for maximum device compatibility.</div>
                    </div>
                </div>
                <div style="height: 60px"></div>
                <div style="display:inline-block;">
                    <div style="width: 10%;float: left;margin-right: 10px"><img src="images/Pencil%20Icon.png"></div>
                    <div style="width: 85%;float: left">
                        <div style="font-weight: 400;margin-bottom: 3%;">Fluid Typography</div>
                        <div>On different screen sizes,fonts automagically scale with the viewport.</div>
                    </div>
                </div>
            </div>
            <div style="width: 500px;">
                <div style="display: inline-block">
                    <div style="width: 10%;float: left;"><img src="images/Check%20Icon.png"></div>
                    <div style="width: 85%;float: left">
                        <div style="font-weight: 400;margin-bottom: 3%;">Accessibility</div>
                        <div>Support for IE8,mobile and tablet devices,screenreaders and color blind.</div>
                    </div>
                </div>
                <div style="height: 60px"></div>
                <div style="display:inline-block;">
                    <div style="width: 10%;float: left;margin-right: 10px"><img src="images/Settings%20Icon.png"></div>
                    <div style="width: 85%;float: left">
                        <div style="font-weight: 400;margin-bottom: 3%;">Customizatio</div>
                        <div>Make any design your own using the Style Editor.Persionailzee fonts.colors,and layouts to create the custom look you want.</div>
                    </div>
                </div>
            </div>
        <div style="-webkit-box-flex: 1"></div>
    </div>
</div>

<div style="background: url(images/backgroundImage.png) no-repeat;width:1500px;height: 800px;color: white">
    <div style="display: -webkit-box;width:1500px;height: 800px;">
        <div style="-webkit-box-flex: 1"></div>
        <div style="width: 600px">
            <div style="width: 100%; height: 170px"></div>
            <div style="font-size: 37px;font-weight: 300;width: 55%">Supportive policies for Chuina's smart car</div>
            <div style="width: 55%;margin-top: 50px;line-height: 25px;margin-bottom: 50px">China will come up with its own smart car
                standards traffic rules,laws and regulations
                relationg to safety.according to the China
                industry innovation Alliance for the intelligent
                and Connected Vehicles.</div>
            <div>
                <button style="height: 60px;width: 240px;margin-right: 25px">CHECK OUT FEATURES</button>
                <button style="height: 60px;width: 240px;background: transparent;color: white">TRY PRODUCT FOR FREE</button>
            </div>
        </div>
        <div style="-webkit-box-flex: 3;">
            <div style="height: 100px;"></div>
            <div style="height: 600px;background-image: url(images/IPad.png);border: solid 1px gray">
                <div style="margin-top: 30px;height: 538px;margin-left: 60px;background-image: url(images/Screen.png)"></div>
            </div>
        </div>
    </div>
    <div class="test_border right"></div>
</div>

<div class="four">
    <div style="margin-top: 7%;"></div>
    <div style="width: 32%;display: inline-block"></div>
    <div style="text-align: center;font-size: 35px;display: inline-block;width: 35%;font-weight: 300">Try Our Awesome Products</div>
    <div style="display: -webkit-box;width: 100%;margin-top: 5%">
        <div style="-webkit-box-flex: 1;"></div>
        <div style="width: 300px;">
            <div style="display: inline-block;">
                <div style="width: 45px;display: inline-block"></div>
                <img src="images/Singleton.png">
                <div style="width: 90%;margin-top: 30px">
                    Li Jun, a China Academy of Engineering
                    academician and also director of the
                    alliance's experts'committee, said
                    that China will also launch design
                    guidance for smart cars, smart map
                    architecture and standards for
                    thest grounds.
                </div>
            </div>
        </div>
        <div style="width: 300px;">
            <div style="display: inline-block;">
                <div style="width: 80px;display: inline-block"></div>
                <img src="images/Hero.png">
                <div style="width: 90%;margin-top: 30px">
                    Li said the smart car industry is
                    able to enlarge the current car
                    industry by 1 trillon yuan ($158.15
                    billion) and also able to boost fast
                    developemnt in 5G, internet of
                    cars, big data,artificial intelligence
                    and new-energy vehicles.
                </div>
            </div>
        </div>
        <div style="width: 300px;">
            <div style="display: inline-block">
                <div style="width: 45px;display: inline-block"></div>
                <img src="images/Portland.png">
                <div style="width: 90%;margin-top: 30px">
                    Zhang Junyi,a partner with NIO
                    Capital, said that the smart car is
                    the trend for the car industry and
                    China's auto sector will usher in a
                    new key development stage with
                    the improvement of infrastructure,
                    technology.policies and laws.
                </div>
            </div>
        </div>
        <div style="-webkit-box-flex: 1"></div>
    </div>
    <div style="height: 100px"></div>
    <hr>
</div>

<div class="five">
    <div style="display: -webkit-box">
        <div style="-webkit-box-flex: 1"></div>
        <div style="width: 570px;margin-top: 100px">
            <img src="images/图层%203.png" width="570px">
        </div>
        <div style="width: 100px;margin-top: 100px"></div>
        <div style="width: 300px;margin-top: 100px">
            <div style="width: 300px;height: 50px"></div>
            <div style="font-weight: 500;font-size: larger">Learn How to Improve Your Personal Business</div>
            <div style="margin-top: 30px;line-height: 25px">Li Jun, a China Academy of Engineering
            academician and also director of the
            alliance's experts'committee,said that
            China will aso launch design guidance
            for smart cars,smart map architecture
            and standards for test grounds.
            </div>
        </div>
        <div style="-webkit-box-flex: 1"></div>
    </div>
    <div style="display: -webkit-box">
        <div style="-webkit-box-flex: 1"></div>
        <div style="width: 300px;margin-top: 100px">
            <div style="width: 300px;height: 50px"></div>
            <div style="font-weight: 500;font-size: larger">Choose Between Two Beautifully Designed Color Schemes</div>
            <div style="margin-top: 30px;line-height: 25px">
                China will come up with its own smart
                car standards, traffic rules,laws and
                regulations relating to safety.according
                to the China industry Innovation Alliance
                for the intelligent and Connected
                Vehicles.
            </div>
        </div>
        <div style="width: 100px;margin-top: 100px"></div>
        <div style="width: 570px;margin-top: 100px">
            <img src="images/图层%204.png" width="570px" height="350px">
        </div>
        <div style="-webkit-box-flex: 1"></div>
    </div>
</div>
<br><br><br><br>
<hr>

<div class="six">
    <div style="text-align: center;font-size: 42px;font-weight: 300;margin-top: 7%;">Our Awesome Crew</div>
    <div style="width: 100%;display: inline-block;text-align: center;margin-top: 20px">Our unique online teaching style makes learning easy for everyone.Whether you</div>
    <div style="text-align: center">are trying to land a new job, brush up on your skills.</div>
    <div style="display: -webkit-box;width: 100%;margin-top: 5%">
        <div style="-webkit-box-flex: 1;"></div>
        <div style="width: 500px;">
            <div class="test_border" style="display: inline-block;background-image: url(images/张思远大.png)">
                <div style="width: 480px;color: white;height: 360px;background-image: url(images/Background拷贝.png)">
                    <div style="height: 50px"></div>
                    <div style="text-align: center;font-weight: bold;font-size: larger">Ethan Dutton</div>
                    <div style="text-align: center;margin-top: 20px">SENIOR VISUAL DESIGNER</div>
                    <div class="center">
                        <div style="width: 52px;height: 54px;background: url(images/Circle.png) no-repeat;margin-top: 70px">
                            <div style="margin: 18px 10px 15px 20px; width: 10px;height: 20px;background: url(images/FacebookIcon.png)"></div>
                        </div>
                        <div style="width: 52px;height: 54px;background: url(images/Circle.png) no-repeat;margin-top: 70px;margin-left: 30px">
                            <div style="margin: 18px 10px 15px 18px; width: 20px;height: 20px;background: url(images/TwitterIcon.png) no-repeat"></div>
                        </div>
                        <div style="width: 52px;height: 54px;background: url(images/Circle.png) no-repeat;margin-top: 70px;margin-left: 30px">
                            <div style="margin: 18px 10px 15px 16px; width: 20px;height: 20px;background: url(images/InstagramIcon.png)"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 30px"></div>
            <div class="test_border" style="display: inline-block;background-image: url(images/文理大_meitu_2.jpg)">
                <div style="width: 480px;color: white;height: 360px;"></div>
            </div>
        </div>
        <div style="width: 500px;">
            <div class="test_border" style="display: inline-block;background-image: url(images/詹方小.jpg)">
                <div style="width: 480px;color: white;height: 360px;"></div>
            </div>
            <div style="height: 30px"></div>
            <div class="test_border" style="display: inline-block;background-image: url(images/沈大师大_meitu_3.jpg)">
                <div style="width: 480px;color: white;height: 360px;"></div>
            </div>
        </div>
        <div style="-webkit-box-flex: 1"></div>
    </div>
</div>
<br><br><br><br>
<hr>
<br><br><br>
<div class="seven">
    <div class="center">
        <div style="width: 470px;border: lightgray 1px solid;height: 530px">
            <p style="text-align: center;font-weight: 400;line-height: 50px;font-size: 20px">FELL FREE TO WRITE US</p>
            <div style="display: flex;align-items: center;flex-direction: column;">
                <input type="text" placeholder="E-mail">
                <input type="text" placeholder="Subject">
                <textarea placeholder="Message" style="margin-bottom: 30px;width: 370px;height: 150px"></textarea>
                <button style="background-color: black;color: white;width: 370px;height: 45px;">SEND</button>
            </div>
        </div>

        <div style="width: 100px"></div>

        <div>
            <p style="font-size: 35px;font-weight: 300">Contacts</p>
            <p style="width: 340px">Make any design your own using the Style
            Editor.Personalize fonts,colors,and layouts to
            create the custom look you want</p>
            <div style="font-weight: 400">
                <div>
                    <img src="images/Map%20Icon.png">
                    <div style="display: inline-block">
                        <p>360 King Street</p>
                        <p>Feastrvale Trevose,PA 19057 </p>
                    </div>
                </div>
                <div>
                    <img src="images/Phone%20Icon.png">
                    <p style="display: inline-block">(755) 564-84-12</p>
                </div>
                <div>
                    <img src="images/Mail%20Icon.png">
                    <p style="display:inline-block;">youname@mail.com</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="eight">
    <div class="center" style="background-color: black;width: 100%;height: 400px;color: white">
        <div style="margin: 100px;color: darkgray">
            <p style="font-weight: 500;font-size: 15px;color: white">LEARN MORE</p>
            <p>How it works?</p>
            <p>Meeting tools</p>
            <p>Live streaming</p>
            <p>Contact method</p>
        </div>
        <div style="margin: 100px;color: darkgray">
            <p style="font-weight: 500;font-size: 15px;color: white">LEARN MORE</p>
            <p>How it works?</p>
            <p>Meeting tools</p>
            <p>Live streaming</p>
            <p>Contact method</p>
        </div>
        <div style="margin: 100px;color: darkgray">
            <p style="font-weight: 500;font-size: 15px;color: white">LEARN MORE</p>
            <p>How it works?</p>
            <p>Meeting tools</p>
            <p>Live streaming</p>
            <p>Contact method</p>
        </div>
        <div style="margin: 100px;color: darkgray">
            <p style="font-weight: 500;font-size: 15px;color: white">LEARN MORE</p>
            <p>How it works?</p>
            <p>Meeting tools</p>
            <p>Live streaming</p>
            <p>Contact method</p>
        </div>
    </div>
</div>

</body>
</html>